<!-- 搜索页 -->
<template>
	<view class="search">
		
		<!-- 搜索部分 -->
		<view class="search__search flex">
			
			<input type="text" class="search__search-input" v-model="searchKeyword"/>
			<view class="search__search-btn" @click="onClickSearch">
				搜索
			</view>
			
		</view>
		
		<!-- 搜索历史 -->
		<view class="search__history" v-if="!isSearch">
			
			<view class="search__history-header flex">
				
				<text>历史搜索</text>
				<image src="/static/images/delete.png" mode="aspectFill" class="search__history-delete"
				@click="openDialog"
				></image>
			</view>
			
			<view class="search__history-items flex">
				
				<view class="search__history-item"
				v-for="item in searchHistoryItems"
				:key="item.id"
				@click="useHistoryItem(item.entry)"
				>
					{{item.entry}}
				</view>
				
			</view>
			
			<!-- <van-dialog id="van-dialog" /> -->
		</view>
		
		<!-- 搜索结果 -->
		<view class="search__result" v-else>
			<view class="search__result-category flex">
				<view class="search__result-category-item"
				v-for="(item,index) in categoryItems"
				:key="item.id"
				@click="changeCategory(index)"
				:class="{'search__result-category-item--active':activeCategory===index}"
				>
					{{item.category}}
				</view>
			</view>
			
			<view class="search__result-tag flex">
				
				<view class="search__result-tag-item"
				v-for="(item,index) in tagItems"
				:key="item.id"
				@click="changeTag(index)"
				:class="{'search__result-tag-item--active':activeTag===index}"
				>
					{{item.tag}}
				</view>
				
			</view>
			
			<view class="search__result-items">
				<view v-if="filteredItems.length === 0" class="no-result">
					<text>没有找到相关物品</text>
				</view>
				<index-ver-item 
					v-for="item in filteredItems" 
					:key="item.id" 
					:data="item.data"
				></index-ver-item>
			</view>
			
		</view>
		
		<zy-dialog 
		ref="dialogRef" 
		:onConfirm="handleConfirm"
		:title="'确认删除最近搜索记录嘛？'"
		></zy-dialog>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	// import Dialog from '/wxcomponents/vant/dialog/dialog.js';
	import indexVerItem from '@/components/indexVerItem/indexVerItem.vue';
	import zyDialog from '@/components/zyDialog/zyDialog.vue';

	// 搜索关键词
	const searchKeyword = ref('');
	
	// 实际用于搜索的关键词
	const searchText = ref('');
	
	// 静态搜索结果数据
	const allItems = ref([
		{
			id: 'item001',
			data: {
				image: 'http://localhost:3000/images/items/白色水杯.jpg',
				name: '白色水杯',
				status: '待寻找',
				date: '2025-01-08',
				type: '生活用品'
			}
		},
		{
			id: 'item002', 
			data: {
				image: 'http://localhost:3000/images/items/白色衣架.jpg',
				name: '白色衣架',
				status: '待寻找',
				date: '2025-01-07',
				type: '电子设备'
			}
		},
		{
			id: 'item003',
			data: {
				image: 'http://localhost:3000/images/items/笔记本.jpg',
				name: '笔记本',
				status: '待寻找',
				date: '2025-01-06', 
				type: '证件'
			}
		},
		{
			id: 'item004',
			data: {
				image: 'http://localhost:3000/images/items/发夹.jpg',
				name: '发夹',
				status: '待寻找',
				date: '2025-01-05',
				type: '电子设备'
			}
		},
		{
			id: 'item005',
			data: {
				image: 'http://localhost:3000/images/items/帆布袋.jpg',
				name: '帆布袋',
				status: '待认领',
				date: '2025-01-08',
				type: '生活用品'
			}
		},
		{
			id: 'item006',
			data: {
				image: 'http://localhost:3000/images/items/高数书.jpg',
				name: '高数书',
				status: '待认领',
				date: '2025-01-07',
				type: '证件'
			}
		},
		{
			id: 'item007',
			data: {
				image: 'http://localhost:3000/images/items/卡包.jpg',
				name: '卡包',
				status: '待认领',
				date: '2025-01-06',
				type: '生活用品'
			}
		},
		{
			id: 'item008',
			data: {
				image: 'http://localhost:3000/images/items/绿色雨伞.jpg',
				name: '绿色雨伞',
				status: '待认领',
				date: '2025-01-05',
				type: '生活用品'
			}
		},
		{
			id: 'item009',
			data: {
				image: 'http://localhost:3000/images/items/铅笔袋.jpg',
				name: '铅笔袋',
				status: '待出售',
				date: '2025-01-08',
				type: '电子设备'
			}
		},
		{
			id: 'item010',
			data: {
				image: 'http://localhost:3000/images/items/手机支架.jpg',
				name: '手机支架',
				status: '待出售',
				date: '2025-01-07',
				type: '电子设备'
			}
		},
		{
			id: 'item011',
			data: {
				image: 'http://localhost:3000/images/items/学生证.jpg',
				name: '学生证',
				status: '待出售',
				date: '2025-01-06',
				type: '图书'
			}
		},
		{
			id: 'item012',
			data: {
				image: 'http://localhost:3000/images/items/眼镜.jpg',
				name: '眼镜',
				status: '待出售',
				date: '2025-01-05',
				type: '电子设备'
			}
		},
		{
			id: 'item013',
			data: {
				image: 'http://localhost:3000/images/items/银色耳机.jpg',
				name: '银色耳机',
				status: '寻找中',
				date: '2025-01-08',
				type: '交通工具'
			}
		},
		{
			id: 'item014',
			data: {
				image: 'http://localhost:3000/images/items/airpods.jpg',
				name: 'airpods',
				status: '寻找中',
				date: '2025-01-07',
				type: '电子设备'
			}
		},
		{
			id: 'item015',
			data: {
				image: 'http://localhost:3000/images/items/iphone.jpg',
				name: 'iphone',
				status: '寻找中',
				date: '2025-01-06',
				type: '图书'
			}
		},
		{
			id: 'item016',
			data: {
				image: 'http://localhost:3000/images/items/OPPO.jpg',
				name: 'OPPO',
				status: '寻找中',
				date: '2025-01-05',
				type: '电子设备'
			}
		}
	]);

	const searchHistoryItems = ref([
		{entry:'手机',id:'search01'},
		{entry:'耳机',id:'search02'},
		{entry:'雨伞',id:'search03'},
	])
	
	const categoryItems = ref([
		{category:'寻物',id:'category01'},
		{category:'失物',id:'category02'},
		{category:'闲置',id:'category03'},
	])
	
	const tagItems = ref([
		{tag:'证件',id:'tag01'},
		{tag:'电子产品',id:'tag02'},
		{tag:'学习用品',id:'tag03'},
		{tag:'衣物饰品',id:'tag04'},
		{tag:'生活用品',id:'tag05'},
	])
	
	// 当前搜索类别
	const activeCategory = ref(0);
	
	// 搜索的tag
	const activeTag = ref(1);
	
	// const dialog = ref(null);
	// 是否搜索
	const isSearch = ref(false);
	
	// 根据搜索关键词和类别过滤结果
	const filteredItems = computed(() => {
		// 如果不在搜索状态，返回所有物品
		if (!isSearch.value) {
			return allItems.value;
		}
		
		// 在搜索状态下，根据关键词和类别过滤
		return allItems.value.filter(item => {
			// 按关键词过滤
			const keywordMatch = !searchText.value || 
				item.data.name.toLowerCase().includes(searchText.value.toLowerCase());
			
			// 按类别过滤
			const categoryMatch = activeCategory.value === 0 || 
				item.data.type === categoryItems.value[activeCategory.value].category;
			
			return keywordMatch && categoryMatch;
		});
	});
	
	function onClickSearch(){
		if (!searchKeyword.value.trim()) {
			uni.showToast({
				title: '请输入搜索关键词',
				icon: 'none'
			});
			return;
		}
		
		console.log('点击搜索！', searchKeyword.value);
		// 更新实际用于搜索的关键词
		searchText.value = searchKeyword.value;
		isSearch.value = true;
		
		// 添加到搜索历史
		if (!searchHistoryItems.value.some(item => item.entry === searchKeyword.value)) {
			searchHistoryItems.value.unshift({
				entry: searchKeyword.value,
				id: 'search' + Date.now()
			});
			
			// 限制历史记录数量
			if (searchHistoryItems.value.length > 10) {
				searchHistoryItems.value.pop();
			}
		}
	}
	
	// 使用历史搜索项
	function useHistoryItem(keyword) {
		searchKeyword.value = keyword;
		onClickSearch();
	}
	
	// 获取 Dialog 组件的引用
	const dialogRef = ref(null);
	
	// 触发弹窗显示
	const openDialog = () => {
	  dialogRef.value?.showDialog();
	};
	
	// 确认按钮的回调函数
	const handleConfirm = () => {
	  console.log("用户点击了确认按钮！");
	  // 清空搜索历史
	  searchHistoryItems.value = [];
	};
	
	
	function changeCategory(index){
		activeCategory.value = index;
	}
	
	function changeTag(index){
		// console.log(index);
		activeTag.value = index;
	}
</script>

<style lang="scss" scoped>
.search{
	width: 100%;
	background-color: #f2f2f2;
	padding-top: 18rpx;
	&__search{
		width: 690rpx;
		height: 54rpx;
		background-color: #fff;
		margin: 0 auto;
		margin-bottom: 24rpx;
		border-radius: 20rpx;
		justify-content: space-between;
		
		&-input{
			flex: 1;
			margin-left: 50rpx;
		}
		
		&-btn{
			width: 110rpx;
			height: 48rpx;
			background-color: #81d3f8;
			color: #333333;
			font-size: 24rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 48rpx;
			margin-right: 10rpx;
		}
	}
	
	// 搜索历史
	&__history{
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		padding-top: 24rpx;
		background-color: #fff;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		
		&-header{
			justify-content: space-between;
			margin-bottom: 30rpx;
		}
		
		&-delete{
			width: 35rpx;
			height: 35rpx;
		}
		
		&-items{
			width: 100%;
			flex-wrap: wrap;
		}
		
		&-item{
			width: 82rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 24rpx;
			color: #797979;
			border: 2rpx solid #797979;
			margin-right: 24rpx;
			border-radius: 15rpx;
		}
	}
	
	// 搜索结果
	&__result{
		&-category{
			width: 690rpx;
			margin: 0 auto;
			padding-bottom: 18rpx;
			border-bottom: 4rpx solid #797979;
			&-item{
				// width: 82rpx;
				// width: ;
				padding: 0 .5em;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				margin-right: 24rpx;
				color: #333333;
				background-color: #fff;
				border-radius: 15rpx;
				&--active{
					background-color: #81d3f8;
				}
			}
		}
		
		&-tag{
			width: 690rpx;
			margin: 18rpx auto;
			padding-bottom: 18rpx;
			&-item{
				// width: 82rpx;
				// width: ;
				padding: 0 .5em;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				margin-right: 24rpx;
				color: #333333;
				background-color: #fff;
				border-radius: 15rpx;
				&--active{
					background-color: #81d3f8;
				}
			}
		}
		
		&-items{
			width: 100%;
			box-sizing: border-box;
			padding: 0 24rpx;
			padding-top: 25rpx;
			background-color: #fff;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
		}
	}
}

.no-result {
	width: 100%;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #999;
	font-size: 28rpx;
}
</style>
